<template>
  <div class='works-extract' id="full-screen" @mousemove="showFullScreen" @mouseout="hideFullScreen">
    <BcStart></BcStart>
    <img class="bac-img" :src="bac" alt="">
    <button class="btn-start" @click="start">开始</button>

    <!-- 全屏按钮 -->
    <FullScreen :hiddenFull="hiddenFull" :isFullScreen="isFullScreen" :fullScreen="fullScreen"></FullScreen>
  </div>
</template>
<script>
import BcStart from '../../../components/starts'
import FullScreen from "../../../components/fullScreen";
export default {
  components: {BcStart,FullScreen},
  name: "",
  data() {
    return {
      bac:require('../../../assets/images/works/bac_3.png'),

      isFullScreen: false, //是否在全屏显示
      settime: null, //显示全面的定时
      hiddenFull: false // 隐藏
    };
  },
  methods: {
    start(){
      console.log("开始抽提")
    },

    fullScreen() {
      _g.fullScreen("full-screen", this);
    },
    showFullScreen(e) {
      var mouseY =
        e.clientY -
        document.querySelector(".work-menu").clientHeight -
        10 -
        document.querySelector("#full-screen").clientHeight;
      var heightModel = this.isFullScreen ? "-220" : "-40";
      if (mouseY > heightModel) {
        this.hiddenFull = true;
      } else {
        this.hiddenFull = false;
      }

      $("#full-screen").css({
        cursor: "auto"
      });
      if (this.settime) clearTimeout(this.settime);
      this.settime = setTimeout(() => {
        $("#full-screen").css({
          cursor: "none"
        });
      }, 2000);
    },
    hideFullScreen() {
      this.hiddenFull = false;
    }
  },
  created() {
    var that=this
    window.onresize=function(){
      var show = document.querySelector("#full-screen").clientHeight==document.querySelector('html').clientHeight
      that.$set(that,"isFullScreen",show)
    }
  },
  beforeDestroy(){
    window.onresize=null
  }
};
</script>
<style lang="scss" scoped>
.works-extract {
  height: 100%;
  flex-grow: 1;
  display: flex;
  position: relative;
  overflow: hidden;

  .btn-start{
    position: absolute;
    top: 49.4%;
    left: 47.3%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    // visibility: hidden;
    background-color: transparent;
    color: transparent;
    outline: none;
    border: none;
    cursor: pointer;
  }
  .bac-img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}
</style>